/* Font */
@font-face {
  font-family: 'Timeless';
  src: url('assets/fonts/Timeless.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Timeless';
  src: url('assets/fonts/Timeless-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

/* Reset & Base Styles */
body {
  font-family: 'Timeless', serif;
  margin: 0;
  padding: 0;
  background: black;
  color: white;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #020711; /* match your background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000; /* above everything */
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader-content {
  text-align: center;
}

.loader-content img {
  width: 130px;
  height: auto;
  animation: pulse 1.2s infinite ease-in-out;
}

.loading-text {
  font-family: 'Timeless', serif;
  font-size: 23px;
  color: white;
  margin-top: 20px;
  letter-spacing: 0.8px;
}

/* Optional subtle animation */
@keyframes pulse {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1.1); }
}

/* Hidden state */
#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

a {
  text-decoration: none;
  color: #7490C7;
  transition: color 0.3s;
}

a:hover {
  color: white;
}

.contact a {
  text-decoration: none;
  color: white;
  transition: color 0.3s;
}



/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 78px;
  background-color: rgba(2, 7, 17, 0.8);
  display: flex;
  align-items: center;
  z-index: 1000;
}

/* Logo */
.logo {
  margin-left: 26px;
  z-index: 2000;
}
.logo img {
  height: 56px;
  display: block;
}

.logo2 {
 margin-left: -495px;
 display: none;
   z-index: 2000;

}

.logo2 img {
  height: 56px;
  display: block;
}

.logo a,
.logo2 a {
  display: inline-block;
  cursor: pointer;
}



/* Menu Icon – stays at top-right always */
.menu-icon2  {
  position: fixed;
  top: 21px;
  right: 30px;
  z-index: 2001;
  display: block;
}

/* Menu Icon – stays at top-right always */
.menu-icon {
  position: fixed;
  top: 21px;
  right: 0px;
  padding-right: 30px;
  padding-left: 100px;
  z-index: 2001;
  display: none;
}

.menu-icon img {
  height: 36px;
  display: block;
}

/* Nav Layout */
.nav-links {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 78px;
}

.nav-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.nav-item a {
  font-size: 26px;
}

/* Exact positioning (adjusted +30px right earlier) */
.projects   { right: 1125px; }
.services   { right: 937px; }
.process    { right: 749px; }
.landscape  { right: 547px; }
.about      { right: 362px; }
.contact    { right: 190px; }

/* Initial state (hidden) */
.dropdown-menu {
  position: absolute;
  top: 40px;
  background-color: rgba(2, 7, 17, 0.8);
  display: flex;
  flex-direction: column;
  font-size: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s linear 0.3s;
  z-index: 999;
}

.process-menu {
  width: 244px;
  height: 89px;     /* reduced height */
  right: -140px;
  top: 54px;        /* top edge remains below navbar */
}

.landscape-menu {
  width: 213px;
  height: 142px;    /* reduced height */
  right: -76px;
  top: 54px;
}

.landscape-menu-it {
  width: 260px;
  height: 220px;    /* reduced height */
  right: -76px;
  top: 54px;
}

/* When open (via JS) */
.dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s linear 0s; /* show immediately */
}

.dropdown-menu li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px; /* no top padding */
}

.dropdown-menu a {
  width: 100%;
}



.language-box {
  position: fixed;
  top: 116px;
  right: 38px;
  width: 58px;
  height: 42px;
  background-color: rgba(2, 7, 17, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2002;
}

.language-box span {
  font-family: 'Timeless', serif;
  font-weight: bold;
  font-size: 26px;
  color: white;
}

.language-dropdown {
  position: fixed;
  top: 116px;
  right: 38px;
  width: 58px;
  height: auto;
  z-index: 2002;
}

.selected-language {
  width: 58px;
  height: 42px;
  background-color: rgba(2, 7, 17, 0.8);
  font-family: 'Timeless', serif;
  font-weight: bold;
  font-size: 26px;
  color: white;
  text-align: center;
  line-height: 42px;  /* aligns text vertically */
  cursor: pointer;
}

.selected-language-it {
  width: 58px;
  height: 42px;
  background-color: rgba(2, 7, 17, 0.8);
  font-family: 'Timeless', serif;
  font-weight: bold;
  font-size: 26px;
  color: white;
  text-align: center;
  line-height: 42px;  /* aligns text vertically */
  cursor: pointer;
}

/* Dropdown menu below */
.language-menu {
  list-style: none;      /* ⬅ removes the bullets */
  padding: 0px;
  margin: 0;
  width: 58px;
  height: 80px;
  background-color: rgba(2, 7, 17, 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.language-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  pointer-events: auto;
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0s;
}

.language-menu li {
  width: 100%;
  height: 40px;
  font-family: 'Timeless', serif;
  font-size: 26px;
  font-weight: bold;
  color: #7490C7;
  cursor: pointer;
  padding-left: 13px;   /* ⬅ adjust horizontally to align with EN */
  line-height: 42px;    /* ⬅ matches height of EN box */
}





html, body {
  background-color: rgba(2, 7, 17, 1);
  margin: 0;
  padding: 0;
  color: white; /* optional default text color */
}

@media screen and (max-width: 1529px) and (min-width: 435px) {
  .nav-item {
    display: none; /* hide main nav items */
  }

  .menu-icon {
    display: block; /* show hamburger */
  }

  .menu-icon2 {
    display: none;
  }



}

@media screen and (max-width: 435px) and (min-width: 20px) {
  .nav-item {
    display: none; /* hide main nav items */
  }

  .menu-icon {
    display: block; /* show hamburger */
  }

  .menu-icon2 {
    display: none;
  }

  .logo{
    display: none;
  }

  .logo2{
    display: block;
    position: relative;
    margin-left: 26px;
  }


}

/* Responsive Menu – always below the menu icon, aligned right */
.responsive-menu {
  display: none;
  position: fixed;
  top: 78px;               /* appears below navbar */
  right: 0px;             /* align with menu icon */
  width: 260px;
  background-color: rgba(2, 7, 17, 0.8);
  padding: 0 40px;
  border: 1px solid #7490C7;
  flex-direction: column;
  z-index: 1001;
  gap: 0px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  margin-bottom: 0px;
}

.responsive-menu-it {
  display: none;
  position: fixed;
  top: 78px;               /* appears below navbar */
  right: 0px;             /* align with menu icon */
  width: 350px;
  background-color: rgba(2, 7, 17, 0.8);
  padding: 0 20px;
  border: 1px solid #7490C7;
  flex-direction: column;
  z-index: 1001;
  gap: 0px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  margin-bottom: 0px;
}

.responsive-menu.open {
  display: flex;
  max-height: 600px;
}

.responsive-menu-it.open {
  display: flex;
  max-height: 600px;
}

/* When open */
.responsive-menu.open {
  opacity: 1;
  transform: translateY(0);
}


.responsive-menu-it.open {
  opacity: 1;
  transform: translateY(0);
}

/* Menu Items */
.responsive-menu > a {
  font-family: 'Timeless', serif;
  font-size: 26px;
  color: white;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
  border-bottom: 1px solid #7490C7;

}

.responsive-menu-it > a {
  font-family: 'Timeless', serif;
  font-size: 26px;
  color: white;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
  border-bottom: 1px solid #7490C7;

}

.responsive-menu > a:hover {
  color: #7490C7;
}

.responsive-menu-it > a:hover {
  color: #7490C7;
}



/* Dropdown styling preserved */
.responsive-dropdown {
  flex-direction: column;
  padding: 10px 0px;
  width: 100%; /* make dropdown match full responsive menu width */
  box-sizing: border-box;
  gap: 20px;
}





.responsive-dropdown {
  margin: 0;
  padding: 0 40px;
  height: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s ease,
    opacity 0.4s ease,
    transform 0.4s ease;
  pointer-events: none;
  visibility: hidden;
}

/* Dropdown styling preserved */
.responsive-dropdown-it {
  flex-direction: column;
  padding: 10px 0px;
  width: 100%; /* make dropdown match full responsive menu width */
  box-sizing: border-box;
  gap: 20px;
}





.responsive-dropdown-it {
  margin: 0;
  padding: 0 20px;
  height: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s ease,
    opacity 0.4s ease,
    transform 0.4s ease;
  pointer-events: none;
  visibility: hidden;
}

.responsive-dropdown.open {
  max-height: 600px;
  height: auto;
  padding-bottom: 10px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}



.responsive-dropdown-it a {
  font-size: 26px;
  color: white;
  padding: 8px 0px;
  border: none;
  line-height: 1.8; /* Add vertical spacing */
  border-bottom: 1px solid #7490C7;

}


.responsive-dropdown-it.open {
  max-height: 600px;
  height: auto;
  padding-bottom: 10px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}



.responsive-dropdown a {
  font-size: 26px;
  color: white;
  padding: 8px 0;
  border: none;
  line-height: 1.8; /* Add vertical spacing */
  border-bottom: 1px solid #7490C7;

}




/* Dropdown styling preserved */
.responsive-dropdown-it2 {
  flex-direction: column;
  padding: 10px 0px;
  width: 100%; /* make dropdown match full responsive menu width */
  box-sizing: border-box;
  gap: 40px;
}





.responsive-dropdown-it2 {
  margin: 0;
  padding: 0 40px;
  height: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s ease,
    opacity 0.4s ease,
    transform 0.4s ease;
  pointer-events: none;
  visibility: hidden;
}

.responsive-dropdown-it2 a {
  font-size: 26px;
  color: white;
  padding: 8px 20px;
  border: none;
  line-height: 1.8; /* Add vertical spacing */
  border-bottom: 1px solid #7490C7;

}


.responsive-dropdown-it2.open {
  max-height: 600px;
  height: auto;
  padding-bottom: 10px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}






/* Dropdown trigger container */
.responsive-process-trigger,
.responsive-landscape-trigger {
  position: relative;
}

.responsive-process-trigger > a {
  font-family: 'Timeless', serif;
  font-size: 26px;
  color: white;
  padding: 10px 0;
  display: block;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
  border-bottom: 1px solid #7490C7;

}

.responsive-landscape-trigger > a {
  font-family: 'Timeless', serif;
  font-size: 26px;
  color: white;
  padding-bottom: 12px;  
  display: block;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
  border-bottom: 1px solid #7490C7;

}

/* Add + symbol (with rotation support) */
.responsive-process-trigger > a::after,
.responsive-landscape-trigger > a::after {
  content: "+";
  position: absolute;
  right: 10px;
  font-size: 26px;
  transition: transform 0.3s ease;
}

/* Rotate + when open */
.responsive-process-trigger.open > a::after,
.responsive-landscape-trigger.open > a::after {
  transform: rotate(45deg);
}



/* Animate menu items */
.responsive-menu > a,
.responsive-menu-it > a,
.responsive-process-trigger > a,
.responsive-landscape-trigger > a,
.responsive-dropdown a {
  transition: color 0.3s ease, transform 0.3s ease;
}




.responsive-menu a:hover,
.responsive-menu-it a:hover,
.responsive-dropdown a:hover {
  color: #7490C7;
}

.responsive-menu a,
.responsive-menu-it a,
.responsive-process-trigger > a,
.responsive-landscape-trigger > a,
.responsive-dropdown a {
  color: white;
  transition: color 0.3s ease;
}

.responsive-hover {
  color: #7490C7 !important;
}






.contact-section {
  text-align: left;
  margin-inline: 5vw;
  margin-top: 120px;

}

.landscape-title {
  font-family: 'Timeless', serif;
  font-weight: bold;
  text-align: center;
  font-size: 60px;
  padding-bottom: 3vh;

}

.landscape-description {
  font-family: 'Timeless', serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.4;
  margin-inline: auto;
  padding-inline: 3vw;
  max-width: 1500px;

}

/* Each individual mask */
.contact-element-1 {
  max-height: 800px;
  background-color: transparent;
  position: relative;
  overflow: hidden;
  grid-column: span 2;
 
  }

  

/* Each individual mask */
.contact-element-2 {
  max-height: 800px;
  background-color: transparent;
  position: relative;
  overflow: hidden;
  grid-column: span 2;

  }

  .contact-text {
  font-family: 'Timeless', serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.4;
  margin-inline: auto;
  padding-inline: 2vw;
  max-width: 1200px;

}

.contact-grid {
  display: grid;
  gap: 2vh;
  margin-top: 5vw;
  margin-bottom: 1vh;
  grid-template-columns: 
   repeat(auto-fit, minmax(200px, 2fr));
  container-type: inline-size;

  @container (849px > width > 0px) {
    .contact-element-1 {
      display: none;
    }
  }

  @container (1307px > width > 864px) {
    .visualization-image-mask3 {
      grid-column-end: span 2;
      grid-column-start: 2;
    }
  }
}

.email-icon {
  width: 150px; /* or adjust size */
  height: auto;
  margin-bottom: 20px; /* or adjust spacing from next/previous icons */
  transform: translateX(0px); /* adjust horizontal position if needed */
}

.email-text {
  font-family: 'Timeless', serif;
  font-size: 30px;
  font-weight: 400;
  color: white;
  position: relative;
  top: -105px;
}


.phone-icon {
  height: 150px;
  margin-bottom: 20px; /* or adjust spacing from next/previous icons */
  transform: translateY(-100px); /* adjust horizontal position if needed */
  margin-left: 20px;
}

.home-icon {
  height: 130px;
  margin-bottom: 20px; /* or adjust spacing from next/previous icons */
  transform: translateY(-180px); /* adjust horizontal position if needed */
  margin-left: 20px;
}

.kvk-icon {
  width: 300px;
  margin-left: 5vw;
}

.btw-icon {
  width: 290px;
  margin-left: 5vw;
}


.logo-big {
  max-width: 80%;
  max-height: 60%;
}

.line-divider7 {
  height: 5px;
  background-color: white;
  margin-inline: 1vw;
  margin-bottom: 2vh;
  
}

.footer {
margin-inline: 2vw;
}


.rights {
  max-width: 600px;
  margin-bottom: 20px; /* or adjust spacing from next/previous icons */
  margin-left: 6vw;

}


@media screen and (max-width: 600px) and (min-width: 200px) {

.language-dropdown {
  position: fixed;
  top: 18px;
  right: 100px;
  width: 58px;
}

.hero-arrow {
  height: 30px;

}

.go-to-project {
  font-size: 17px;
  padding: 5px 8px;
}

.hero-textbox {

  font-size: 18px;
  }

  .hero-textbox.bottom-right {
  bottom: 100px;
  right: 0px;
}


.project-stats {
  display: block;
}

.stat-box {
  margin-bottom: 30px;

}

.projects-title {
  margin-top: 80px;
}

.visualization-title, .process-title, .landscape-title, .hero-image-text h2, .projects-title, .stat-number {

  font-size: 35px;
}

.visualization-description, .process-description, .landscape-description, .expertise-description, .contact-text, .hero-image-text p, .projects-description, .stat-label {

  font-size: 20px;
}

/* SVG icon */
.visualization-icon {
  width: 100px;
  margin-top: 0;
  margin-bottom: -2vh;
}

/* Heading */
.visualization-heading {

  font-size: 35px;
  
}

/* Paragraph text */
.visualization-text {
  font-size: 20px;
  
}

/* Arrow icon that appears on hover */
.visualization-arrow {

  width: 40px;
  
}


.grid-project, .grid-hero {
   grid-template-columns: 1fr;
   gap: 3vh;
}


/* Each individual mask */
.visualization-image-mask1 {
display: none;
  }



.hero-image {
  height: 80vh;
}

.hero-mask:hover .hero-image-text {
  opacity: 1;
  transform: translateY(-20px);
}


.services-icon {

  height: 50px;
}

.line-divider2 {
  margin-top: 100px; 
  margin-bottom: 5vh;

}

.process-hero-textbox {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }



.process-hero-textbox h2 {
  font-size: 30px;

}

.process-hero-textbox p {
  font-size: 20px;
  max-width: 90%;

}

.carousel-arrow {
  width: 50px;
  height: 50px;
  
}

.process-hero-input, .process-hero-output {
  display: none;
  
}

.visual-process-icon {
 
  height: 50px;
  
}

.design-process-icon {

  height: 50px;
}


.line-divider3 {

  margin-top: 100px; 
  margin-bottom: 5vh;
}

.line-divider4, .line-divider5 {

  margin-top: 100px; 
  margin-bottom: 5vh;
}

.expertise-icon {
  width: 100px;
  margin-top: 0;
  margin-bottom: 0;
}

.our-story-icon {
  top: 0;
  right: 1vw;
  width: auto;
  height: 50px;

}

.line-divider6 {

  margin-top: 100px; 
  margin-bottom: 2vh;
}

.email-icon {
  width: 80px; /* or adjust size */
  margin-bottom: 2vh; /* or adjust spacing from next/previous icons */
}

.email-text {
  font-size: 20px;
  top: -65px;
}


.phone-icon {
  height: 90px;
  margin-bottom: 2vh; /* or adjust spacing from next/previous icons */
  margin-top: 5vh;
  margin-left: 5px;
}

.home-icon {
  height: 90px;
  margin-top: 30px; /* or adjust spacing from next/previous icons */
  margin-left: 5px;
}

.kvk-icon {
  width: auto;
  height: 55px;

}

.btw-icon {
  width: auto;
  height: 55px;

}

.rights {
  max-width: 90vw;
  margin-bottom: 20px; /* or adjust spacing from next/previous icons */
  margin-left: 6vw;

}
}

@media screen and (max-width: 1300px) and (min-width: 601px) {



.responsive-menu.open {

  max-height: 600px;
}


.language-dropdown {
  position: fixed;
  top: 20px;
  right: 200px;
  width: 50px;
}

.hero-arrow {
  height: 37px;

}

.go-to-project {
  font-size: 22px;
  padding: 5px 8px;
}

.hero-textbox {

  font-size: 19px;
  padding-top: 0;
  padding-bottom: 0;
  }

  .hero-textbox.bottom-right {
  right: 0px;
}



.grid-project, .grid-hero {
  grid-template-columns: 1fr;
  gap: 3vh;
}


/* Each individual mask */
.visualization-image-mask1 {
display: none;
  }




.hero-mask {
  max-height: 80vh;
}

.hero-image {
  height: 80vh;
}

.hero-mask:hover .hero-image-text {
  opacity: 1;
  transform: translateY(-20px);
}


.stat-number {
  font-size: 35px;
}

 .stat-label {
  font-size: 20px;
 }

.stat-box {
  margin-bottom: 30px;

}

.visualization-title, .process-title, .landscape-title, .hero-image-text h2, .projects-title {

  font-size: 45px;
}

.visualization-description, .process-description, .landscape-description, .expertise-description, .contact-text, .hero-image-text p, .projects-description, .stat-label {

  font-size: 25px;
}


.visual-grid {

  grid-template-columns: 
   repeat(auto-fit, minmax(120px, 2fr));
}

.visualization-title, .process-title, .landscape-title {

  font-size: 35px;
}

.visualization-description, .process-description, .landscape-description, .expertise-description, .contact-text {

  font-size: 20px;
}

/* SVG icon */
.visualization-icon {
  width: 100px;
  margin-top: 0;
  margin-bottom: -2vh;
}

/* Heading */
.visualization-heading {

  font-size: 35px;
  
}

/* Paragraph text */
.visualization-text {
  font-size: 20px;
  
}

/* Arrow icon that appears on hover */
.visualization-arrow {

  width: 40px;
  
}
.services-icon {

  height: 50px;
}

.line-divider2 {
  margin-top: 100px; 
  margin-bottom: 5vh;

}

.process-hero-textbox {
    align-items: center;
    text-align: center;
    gap: 20px;
  }


.process-hero-textbox h2 {
  font-size: 25px;

}

.process-hero-textbox p {
  font-size: 20px;
  max-width: 80%;

}

.carousel-arrow {
  width: 50px;
  height: 50px;
  
}

.carousel-indicators {
  scale: 0.6;
  transform: translateY(50px);
}

.process-hero-input, .process-hero-output {
  display: none;
  
}

.visual-process-icon {
 
  height: 50px;
  
}

.design-process-icon {

  height: 50px;
}


.line-divider3 {

  margin-top: 100px; 
  margin-bottom: 5vh;
}

.line-divider4, .line-divider5 {

  margin-top: 100px; 
  margin-bottom: 5vh;
}

.expertise-icon {
  width: 100px;
  margin-top: 0;
  margin-bottom: 0;
}

.our-story-icon {
  top: 0;
  right: 1vw;
  width: auto;
  height: 50px;

}

.line-divider6 {

  margin-top: 100px; 
  margin-bottom: 2vh;
}

.email-icon {
  width: 80px; /* or adjust size */
  margin-bottom: 2vh; /* or adjust spacing from next/previous icons */
}

.email-text {
  font-size: 20px;
  top: -65px;
}


.phone-icon {
  height: 90px;
  margin-bottom: 2vh; /* or adjust spacing from next/previous icons */
  margin-top: 30px;
  margin-left: 5px;
}

.home-icon {
  height: 90px;
  margin-top: 30px; /* or adjust spacing from next/previous icons */
  margin-left: 5px;
}

.kvk-icon {
  width: auto;
  height: 55px;

}

.btw-icon {
  width: auto;
  height: 55px;

}

.rights {
  max-width: 40vw;
  margin-bottom: 20px; /* or adjust spacing from next/previous icons */
  margin-left: 6vw;

}
}